import { LitElement, css, html } from "lit";
import { customElement } from "lit/decorators.js";

/**
 * @desc 简历
 */
@customElement("cv-resume-two")
export class CvResumeTwo extends LitElement {
  static override styles = css`
    :root {
      --primary-color: #2c3e50;
      --secondary-color: #3498db;
      --accent-color: #1abc9c;
      --text-color: #34495e;
      --light-bg: #f8f9fa;
      --border-color: #e9ecef;
      --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      --transition: all 0.3s ease;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      line-height: 1.6;
      color: var(--text-color);
      background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
      min-height: 100vh;
      padding: 20px;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.5);
    }

    .header {
      background: linear-gradient(
        135deg,
        var(--primary-color) 0%,
        var(--secondary-color) 100%
      );
      color: white;
      padding: 50px 40px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .header::before {
      content: "";
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
      );
      transform: rotate(30deg);
      pointer-events: none;
    }

    .header h1 {
      font-size: 2.8em;
      margin-bottom: 10px;
      font-weight: 600;
      letter-spacing: 0.5px;
      position: relative;
      z-index: 1;
    }

    .header p {
      font-size: 1.3em;
      opacity: 0.9;
      position: relative;
      z-index: 1;
    }

    .content {
      padding: 40px;
    }

    .section {
      margin-bottom: 40px;
      position: relative;
    }

    .section-title {
      font-size: 1.6em;
      color: var(--primary-color);
      border-left: 5px solid var(--accent-color);
      padding-left: 20px;
      margin-bottom: 25px;
      font-weight: 600;
      position: relative;
    }

    .section-title::after {
      content: "";
      position: absolute;
      bottom: -8px;
      left: 20px;
      width: 50px;
      height: 3px;
      background: var(--accent-color);
      border-radius: 3px;
    }

    .experience-item,
    .education-item {
      background: white;
      padding: 25px;
      margin-bottom: 20px;
      border-radius: 12px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
      border: 1px solid var(--border-color);
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .experience-item:hover,
    .education-item:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
      border-color: var(--accent-color);
    }

    .experience-item::before,
    .education-item::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 5px;
      height: 100%;
      background: var(--accent-color);
      transform: scaleY(0);
      transform-origin: top;
      transition: transform 0.4s ease;
    }

    .experience-item:hover::before,
    .education-item:hover::before {
      transform: scaleY(1);
    }

    .item-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      flex-wrap: wrap;
      gap: 10px;
    }

    .item-title {
      font-size: 1.3em;
      color: var(--primary-color);
      font-weight: 600;
    }

    .item-date {
      color: var(--secondary-color);
      font-size: 0.95em;
      background: rgba(52, 152, 219, 0.1);
      padding: 4px 12px;
      border-radius: 20px;
      font-weight: 500;
    }

    .item-company {
      color: #7f8c8d;
      font-size: 1.05em;
      margin-bottom: 12px;
      font-weight: 500;
    }

    .item-description {
      color: #555;
      line-height: 1.7;
    }

    .item-description ul {
      margin-left: 20px;
      margin-top: 10px;
    }

    .item-description li {
      margin-bottom: 8px;
      position: relative;
      padding-left: 15px;
    }

    .item-description li::before {
      content: "•";
      position: absolute;
      left: 0;
      color: var(--accent-color);
      font-size: 1.2em;
      line-height: 1;
    }

    .skills {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 15px;
    }

    .skill-tag {
      background: linear-gradient(135deg, var(--accent-color), #16a085);
      color: white;
      padding: 8px 18px;
      border-radius: 25px;
      font-size: 0.95em;
      font-weight: 500;
      transition: var(--transition);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }

    .skill-tag:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    }

    .contact-info {
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 30px;
      border: 1px solid var(--border-color);
      position: relative;
    }

    .contact-info::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 80px;
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233498db' opacity='0.1' d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E")
        no-repeat;
      background-size: contain;
      opacity: 0.3;
    }

    .contact-item {
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      font-size: 1.05em;
    }

    .contact-item:last-child {
      margin-bottom: 0;
    }

    .contact-icon {
      width: 24px;
      height: 24px;
      margin-right: 15px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--secondary-color);
      color: white;
      border-radius: 50%;
      font-size: 0.8em;
    }

    .status-badge {
      display: inline-block;
      background: linear-gradient(135deg, #2ecc71, #27ae60);
      color: white;
      padding: 6px 16px;
      border-radius: 25px;
      font-size: 0.95em;
      margin-top: 15px;
      font-weight: 500;
      box-shadow: 0 4px 6px rgba(46, 204, 113, 0.2);
    }

    .section-intro {
      background: linear-gradient(
        135deg,
        rgba(26, 188, 156, 0.05) 0%,
        rgba(52, 152, 219, 0.05) 100%
      );
      padding: 25px;
      border-radius: 12px;
      margin-bottom: 25px;
      border-left: 4px solid var(--accent-color);
    }

    .section-intro p {
      margin: 0;
      font-size: 1.05em;
      line-height: 1.7;
    }

    @media (max-width: 768px) {
      body {
        padding: 10px;
      }

      .header {
        padding: 30px 20px;
      }

      .header h1 {
        font-size: 2.2em;
      }

      .content {
        padding: 25px;
      }

      .section-title {
        font-size: 1.4em;
      }

      .experience-item,
      .education-item {
        padding: 20px;
      }

      .contact-info {
        padding: 20px;
      }
    }

    @media print {
      body {
        background: white;
        padding: 0;
      }

      .container {
        box-shadow: none;
        border-radius: 0;
        border: none;
      }

      .header {
        background: var(--primary-color) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      .experience-item,
      .education-item {
        page-break-inside: avoid;
      }

      .skill-tag {
        background: var(--accent-color) !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
    }
  `;

  override render() {
    return html`
      <div class="container">
        <div class="header">
          <h1>xxx</h1>
          <p>上海 | 前端 / 后端 / 全栈开发</p>
          <span class="status-badge">目前在职</span>
        </div>

        <div class="content">
          <div class="section">
            <h2 class="section-title">联系方式</h2>
            <div class="contact-info">
              <div class="contact-item">
                <span class="contact-icon">📍</span>
                <span>上海</span>
              </div>
              <div class="contact-item">
                <span class="contact-icon">💼</span>
                <span>前端 / 后端 / 全栈开发</span>
              </div>
              <div class="contact-item">
                <span class="contact-icon">⚡</span>
                <span>目前在职</span>
              </div>
            </div>
          </div>

          <div class="section">
            <h2 class="section-title">技术栈</h2>
            <div class="skills">
              <span class="skill-tag">Go</span>
              <span class="skill-tag">TypeScript</span>
              <span class="skill-tag">React</span>
              <span class="skill-tag">Vue3</span>
              <span class="skill-tag">TiDB</span>
              <span class="skill-tag">Docker</span>
              <span class="skill-tag">Node.js</span>
            </div>
          </div>

          <div class="section">
            <h2 class="section-title">工作经历</h2>

            <div class="section-intro">
              <p>
                在国际化改造、中间件、协同服务、信息中心等领域有丰富经验，专注于提升开发效率和系统性能优化。
              </p>
            </div>

            <div class="experience-item">
              <div class="item-header">
                <span class="item-title">Web 开发工程师</span>
                <span class="item-date">携程 Ctrip</span>
              </div>
              <div class="item-company">国际版中心</div>
              <div class="item-description">
                <p>
                  负责国际版中心的运管后台开发工作，致力于提升开发效率和系统性能。
                </p>
                <ul style="margin-left: 20px; margin-top: 10px;">
                  <li>参与制定提效的相关标准与流程</li>
                  <li>进行运管后台开发，包括eniysk站迭代</li>
                  <li>负责通用选择器功能的设计与开发</li>
                  <li>参与控糖组件的开发工作</li>
                  <li>基于Docker的Node发布系统开发</li>
                  <li>静态资源CDN平台建设</li>
                  <li>静态资源增量更新服务开发</li>
                  <li>Bug修复和文档撰写工作</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="section">
            <h2 class="section-title">演讲经历</h2>
            <div class="experience-item">
              <div class="item-header">
                <span class="item-title">技术分享嘉宾</span>
                <span class="item-date">2019年</span>
              </div>
              <div class="item-company">线上分享</div>
              <div class="item-description">
                <p>参与技术社区线上分享活动，分享前端开发经验和最佳实践。</p>
                <ul style="margin-left: 20px; margin-top: 10px;">
                  <li>参与圆桌讨论，分享技术见解</li>
                  <li>分享前端功能实现的技术方案</li>
                  <li>探讨5道法题的技术实现思路</li>
                </ul>
              </div>
            </div>
          </div>

          <div class="section">
            <h2 class="section-title">教育经历</h2>
            <div class="education-item">
              <div class="item-header">
                <span class="item-title">计算机相关专业</span>
                <span class="item-date">已毕业</span>
              </div>
              <div class="item-description">
                <p>
                  系统学习计算机科学基础知识，为后续的技术发展打下坚实基础。
                </p>
              </div>
            </div>
          </div>

          <div class="section">
            <h2 class="section-title">自我评价</h2>
            <div class="section-intro">
              <p>
                具备扎实的前端和后端开发技能，能够独立完成全栈项目开发。在工作中注重代码质量和系统性能，善于解决复杂的技术问题。具有良好的团队协作能力和沟通能力，能够快速适应新技术和新环境。
              </p>
            </div>
          </div>
        </div>
      </div>
    `;
  }
}
